<template>
  <el-container>
    <el-main>
      <el-card shadow="never">
        <div style="margin-bottom: 10px">常见问题</div>
        <div v-for="(list,i) in lists" :key="i">
          <el-row>
            <el-col :span="6" style="color: #409EFF">{{list.title}}</el-col>
            <el-col :span="18" style="border-left:1px solid grey;">
              <p style="padding-left: 10px">{{list.questionFirst}}</p>
              <p style="padding-left: 10px">{{list.questionSecond}}</p>
            </el-col>

          </el-row>
          <el-divider></el-divider>
        </div>
      </el-card>
    </el-main>
    <el-footer>
      <router-link to="#">在线客服</router-link>
      <router-link to="#">电话客服</router-link>
    </el-footer>
  </el-container>
</template>

<script>
    export default {
        name: "Service",
        data() {
            return {
                lists: [
                    {title: '催单问题', questionFirst: '怎么催单？', questionSecond: '订单一直没有分配骑手怎么办？'},
                    {title: '退单问题', questionFirst: '怎么申请退单？', questionSecond: '怎么申请客服介入？'},
                    {title: '活动问题', questionFirst: '心愿城活动？', questionSecond: '饭票活动？'},
                    {title: '投诉建议', questionFirst: '错送漏送餐品了怎么办？', questionSecond: '商家不开发票怎么办？'},
                ],
            }
        },
        methods: {
        }
    }
</script>

<style scoped>
  p {
    margin: 5px 0;
    font-size: 12px;
  }

  .el-divider {
    margin: 15px 0;
  }
</style>
